import React, { useEffect, useState } from "react";
import { Table } from 'antd';
import type { TableColumnsType } from 'antd';
import styles from "./index.module.scss";

interface propsType<T> {
    data: T[],
    columns: TableColumnsType,
    children?: JSX.Element
}

const TableComponent = <T,>(props: propsType<T>) => {
    const { data, columns } = props
    const [loading, setLoading] = useState<boolean>(true);
    useEffect(() => {
        if (data) {
            setLoading(false);
        }
    }, [data])
    return (
        <div className={styles.Table}>
            <div className={styles.TableHeader}>
                {props.children}
            </div>
            <Table loading={loading} expandable={{
                childrenColumnName:"sub"
            }} dataSource={data} pagination={false} columns={columns} />
        </div>
    )
}

export default TableComponent;